<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用管理 - 公司应用商店管理平台</title>

    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .sidebar-item:hover:not(.active) {
                @apply bg-light-1;
            }
            .card {
                @apply bg-white rounded-xl shadow-sm border border-light-2 p-5 transition-all duration-300 hover:shadow-md;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80;
            }
            .btn-outline {
                @apply border border-light-2 hover:border-primary hover:text-primary;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .filter-tag {
                @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-light-1 text-dark-2 text-sm cursor-pointer hover:bg-primary/10 hover:text-primary transition-colors;
            }
        }
    </style>
</head>
<body class="font-inter bg-light-1 text-dark min-h-screen flex overflow-hidden">
<!-- 侧边栏 -->
<aside id="sidebar" class="w-64 bg-white h-screen border-r border-light-2 transition-all duration-300 ease-in-out z-20">
    <div class="p-5 border-b border-light-2">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
                <i class="fa fa-th-large text-xl"></i>
            </div>
            <h1 class="text-xl font-bold">应用商店管理</h1>
        </div>
    </div>

    <div class="py-4">
        <nav class="px-3 space-y-1">
            <p class="px-4 text-xs text-dark-2 uppercase font-medium mb-2">主要功能</p>

            <div class="sidebar-item">
                <i class="fa fa-tachometer w-5 text-center"></i>
                <span>控制台</span>
            </div>

            <div class="sidebar-item active">
                <i class="fa fa-th w-5 text-center"></i>
                <span>应用管理</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-users w-5 text-center"></i>
                <span>用户管理</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-download w-5 text-center"></i>
                <span>下载统计</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-comment w-5 text-center"></i>
                <span>评论管理</span>
            </div>

            <p class="px-4 text-xs text-dark-2 uppercase font-medium mb-2 mt-6">系统设置</p>

            <div class="sidebar-item">
                <i class="fa fa-cog w-5 text-center"></i>
                <span>设置</span>
            </div>

            <div class="sidebar-item">
                <i class="fa fa-question-circle w-5 text-center"></i>
                <span>帮助中心</span>
            </div>
        </nav>
    </div>

    <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2 bg-white">
        <div class="flex items-center gap-3">
            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
            <div>
                <p class="font-medium text-sm">管理员</p>
                <p class="text-xs text-dark-2">admin@company.com</p>
            </div>
            <button class="ml-auto text-dark-2 hover:text-danger">
                <i class="fa fa-sign-out"></i>
            </button>
        </div>
    </div>
</aside>

<!-- 主内容区 -->
<main class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航栏 -->
    <header class="h-16 bg-white border-b border-light-2 flex items-center justify-between px-6 z-10">
        <div class="flex items-center gap-4">
            <button id="sidebar-toggle" class="lg:hidden text-dark-2 hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative w-64">
                <input type="text" placeholder="搜索应用、用户..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-dark-2"></i>
            </div>
        </div>

        <div class="flex items-center gap-5">
            <button class="relative text-dark-2 hover:text-primary transition-colors">
                <i class="fa fa-bell text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
            </button>

            <button class="relative text-dark-2 hover:text-primary transition-colors">
                <i class="fa fa-envelope text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">5</span>
            </button>

            <div class="h-8 w-px bg-light-2"></div>

            <div class="flex items-center gap-3">
                <div class="hidden md:block">
                    <p class="font-medium text-sm">管理员</p>
                    <p class="text-xs text-dark-2">在线</p>
                </div>
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm">
            </div>
        </div>
    </header>

    <!-- 内容滚动区域 -->
    <div class="flex-1 overflow-y-auto p-6 bg-light-1">
        <!-- 页面标题和操作按钮 -->
        <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold">应用管理</h2>
                <p class="text-dark-2">管理公司内部所有应用的信息和状态</p>
            </div>

            <div class="flex flex-wrap gap-3">
                <div class="relative">
                    <button id="batch-actions-btn" class="btn btn-outline">
                        <i class="fa fa-cog"></i>
                        <span>批量操作</span>
                        <i class="fa fa-chevron-down text-xs ml-1"></i>
                    </button>
                    <!-- 批量操作下拉菜单 -->
                    <div id="batch-actions-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                        <div class="py-2">
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">批量发布</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">批量下架</a>
                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">批量删除</a>
                        </div>
                    </div>
                </div>

                <button class="btn btn-primary">
                    <i class="fa fa-plus"></i>
                    <span>添加新应用</span>
                </button>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="card mb-6">
            <div class="flex flex-col gap-4">
                <h3 class="font-bold">筛选条件</h3>

                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm text-dark-2 mb-1.5">应用状态</label>
                        <select class="w-full px-3 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all bg-white">
                            <option value="">全部状态</option>
                            <option value="published">已发布</option>
                            <option value="testing">测试中</option>
                            <option value="pending">待审核</option>
                            <option value="rejected">已拒绝</option>
                            <option value="offline">已下架</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm text-dark-2 mb-1.5">应用分类</label>
                        <select class="w-full px-3 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all bg-white">
                            <option value="">全部分类</option>
                            <option value="productivity">生产力</option>
                            <option value="communication">通讯</option>
                            <option value="business">商务</option>
                            <option value="tools">工具</option>
                            <option value="entertainment">娱乐</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm text-dark-2 mb-1.5">更新日期</label>
                        <input type="date" class="w-full px-3 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all bg-white">
                    </div>

                    <div>
                        <label class="block text-sm text-dark-2 mb-1.5">排序方式</label>
                        <select class="w-full px-3 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all bg-white">
                            <option value="recent">最近更新</option>
                            <option value="downloads-desc">下载量从高到低</option>
                            <option value="downloads-asc">下载量从低到高</option>
                            <option value="rating-desc">评分从高到低</option>
                            <option value="rating-asc">评分从低到高</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-3 pt-2">
                    <button class="btn btn-outline">
                        <i class="fa fa-refresh"></i>
                        <span>重置</span>
                    </button>
                    <button class="btn btn-primary">
                        <i class="fa fa-filter"></i>
                        <span>应用筛选</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 活跃筛选标签 -->
        <div class="mb-4 flex flex-wrap gap-2">
            <div class="filter-tag">
                <span>状态: 已发布</span>
                <i class="fa fa-times-circle"></i>
            </div>
            <div class="filter-tag">
                <span>分类: 生产力</span>
                <i class="fa fa-times-circle"></i>
            </div>
            <button class="text-primary text-sm hover:underline flex items-center gap-1">
                <i class="fa fa-times"></i>
                <span>清除全部</span>
            </button>
        </div>

        <!-- 应用列表 -->
        <div class="card mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                <h3 class="font-bold text-lg">应用列表</h3>
                <div class="relative w-full md:w-64">
                    <input type="text" placeholder="搜索应用..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-light-2 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-dark-2"></i>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full min-w-[800px]">
                    <thead>
                    <tr class="border-b border-light-2">
                        <th class="text-left py-3 px-4 text-dark-2 font-medium w-12">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">应用名称</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">分类</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">版本</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">大小</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">下载量</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">评分</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">最后更新</th>
                        <th class="text-left py-3 px-4 text-dark-2 font-medium">状态</th>
                        <th class="text-right py-3 px-4 text-dark-2 font-medium">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/1/48/48" alt="项目管理工具" class="w-10 h-10 rounded-lg object-cover">
                                <div>
                                    <span class="font-medium">项目管理工具</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.project</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">生产力</td>
                        <td class="py-4 px-4 text-dark-2">2.3.1</td>
                        <td class="py-4 px-4 text-dark-2">12.5 MB</td>
                        <td class="py-4 px-4 text-dark-2">342</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-warning mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-o"></i>
                                </div>
                                <span class="text-dark-2 text-sm">4.5</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-06-15</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-success/10 text-success">已发布</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">编辑信息</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">版本管理</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">用户评论</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">下架应用</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/2/48/48" alt="企业通讯" class="w-10 h-10 rounded-lg object-cover">
                                <div>
                                    <span class="font-medium">企业通讯</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.chat</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">通讯</td>
                        <td class="py-4 px-4 text-dark-2">3.1.0</td>
                        <td class="py-4 px-4 text-dark-2">24.8 MB</td>
                        <td class="py-4 px-4 text-dark-2">567</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-warning mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span class="text-dark-2 text-sm">4.0</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-06-10</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-success/10 text-success">已发布</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">编辑信息</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">版本管理</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">用户评论</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">下架应用</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/3/48/48" alt="文档协作" class="w-10 h-10 rounded-lg object-cover">
                                <div>
                                    <span class="font-medium">文档协作</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.docs</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">生产力</td>
                        <td class="py-4 px-4 text-dark-2">1.8.2</td>
                        <td class="py-4 px-4 text-dark-2">8.7 MB</td>
                        <td class="py-4 px-4 text-dark-2">289</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-warning mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <span class="text-dark-2 text-sm">5.0</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-06-05</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-success/10 text-success">已发布</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">编辑信息</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">版本管理</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">用户评论</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">下架应用</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/4/48/48" alt="财务分析工具" class="w-10 h-10 rounded-lg object-cover">
                                <div>
                                    <span class="font-medium">财务分析工具</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.finance</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">商务</td>
                        <td class="py-4 px-4 text-dark-2">0.9.5</td>
                        <td class="py-4 px-4 text-dark-2">15.2 MB</td>
                        <td class="py-4 px-4 text-dark-2">42</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-warning mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span class="text-dark-2 text-sm">3.0</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-05-28</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-warning/10 text-warning">测试中</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">编辑信息</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">版本管理</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">测试反馈</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-primary hover:bg-primary/5">发布应用</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr class="border-b border-light-2 hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/5/48/48" alt="人力资源管理" class="w-10 h-10 rounded-lg object-cover">
                                <div>
                                    <span class="font-medium">人力资源管理</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.hr</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">商务</td>
                        <td class="py-4 px-4 text-dark-2">1.0.0</td>
                        <td class="py-4 px-4 text-dark-2">18.4 MB</td>
                        <td class="py-4 px-4 text-dark-2">0</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-light-3 mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <span class="text-dark-2 text-sm">暂无评分</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-06-18</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-light-2 text-dark-2">待审核</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">编辑信息</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-primary hover:bg-primary/5">审核应用</a>
                                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">拒绝发布</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr class="hover:bg-light-1/50 transition-colors">
                        <td class="py-4 px-4">
                            <input type="checkbox" class="rounded border-light-2 text-primary focus:ring-primary">
                        </td>
                        <td class="py-4 px-4">
                            <div class="flex items-center gap-3">
                                <img src="https://picsum.photos/id/6/48/48" alt="旧版日历工具" class="w-10 h-10 rounded-lg object-cover opacity-60">
                                <div>
                                    <span class="font-medium line-through opacity-70">旧版日历工具</span>
                                    <p class="text-xs text-dark-2 mt-0.5">com.company.calendar.old</p>
                                </div>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">工具</td>
                        <td class="py-4 px-4 text-dark-2">2.7.3</td>
                        <td class="py-4 px-4 text-dark-2">5.2 MB</td>
                        <td class="py-4 px-4 text-dark-2">128</td>
                        <td class="py-4 px-4">
                            <div class="flex items-center">
                                <div class="text-warning mr-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span class="text-dark-2 text-sm">3.5</span>
                            </div>
                        </td>
                        <td class="py-4 px-4 text-dark-2">2023-04-10</td>
                        <td class="py-4 px-4">
                            <span class="badge bg-dark-2/10 text-dark-2">已下架</span>
                        </td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <div class="relative">
                                    <button class="text-dark-2 hover:text-primary" title="更多操作">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                    <!-- 操作下拉菜单 -->
                                    <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-light-2 z-10">
                                        <div class="py-2">
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看详情</a>
                                            <a href="#" class="block px-4 py-2 text-sm hover:bg-light-1">查看历史数据</a>
                                            <div class="border-t border-light-2 my-1"></div>
                                            <a href="#" class="block px-4 py-2 text-sm text-primary hover:bg-primary/5">重新上架</a>
                                            <a href="#" class="block px-4 py-2 text-sm text-danger hover:bg-danger/5">永久删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="mt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <p class="text-sm text-dark-2">显示 1 到 6 条，共 24 条</p>
                <div class="flex gap-1">
                    <button class="w-9 h-9 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary disabled:opacity-50 disabled:pointer-events-none" disabled>
                        <i class="fa fa-chevron-left text-xs"></i>
                    </button>
                    <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white">1</button>
                    <button class="w-9 h-9 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">2</button>
                    <button class="w-9 h-9 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">3</button>
                    <button class="w-9 h-9 flex items-center justify-center rounded border border-light-2 hover:border-primary hover:text-primary">4</button>
                    <button class="w-9 h-9 flex items-center justify-center rounded border border-light-2 text-dark-2 hover:border-primary hover:text-primary">
                        <i class="fa fa-chevron-right text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 应用详情模态框 (默认隐藏) -->
<div id="app-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="bg-white rounded-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
        <div class="p-5 border-b border-light-2 flex items-center justify-between">
            <h3 class="font-bold text-lg">应用详情</h3>
            <button id="close-modal" class="text-dark-2 hover:text-danger">
                <i class="fa fa-times"></i>
            </button>
        </div>

        <div class="p-5">
            <!-- 模态框内容将通过JavaScript动态填充 -->
        </div>
    </div>
</div>

<script>
    // 侧边栏切换功能
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('-translate-x-full');
    });

    // 批量操作下拉菜单
    const batchActionsBtn = document.getElementById('batch-actions-btn');
    const batchActionsMenu = document.getElementById('batch-actions-menu');

    batchActionsBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        batchActionsMenu.classList.toggle('hidden');
    });

    // 点击其他地方关闭下拉菜单
    document.addEventListener('click', function() {
        batchActionsMenu.classList.add('hidden');

        // 关闭所有操作下拉菜单
        document.querySelectorAll('.relative > div:not(.hidden)').forEach(menu => {
            menu.classList.add('hidden');
        });
    });

    // 应用操作下拉菜单
    document.querySelectorAll('.fa-ellipsis-v').forEach(icon => {
        icon.parentElement.addEventListener('click', function(e) {
            e.stopPropagation();
            const menu = this.nextElementSibling;

            // 关闭其他所有菜单
            document.querySelectorAll('.relative > div:not(.hidden)').forEach(otherMenu => {
                if (otherMenu !== menu) {
                    otherMenu.classList.add('hidden');
                }
            });

            // 切换当前菜单
            menu.classList.toggle('hidden');
        });
    });

    // 筛选标签删除功能
    document.querySelectorAll('.filter-tag .fa-times-circle').forEach(icon => {
        icon.addEventListener('click', function(e) {
            e.stopPropagation();
            this.parentElement.remove();
        });
    });

    // 模态框功能
    const modal = document.getElementById('app-modal');

    // 打开模态框的按钮
    document.querySelectorAll('.fa-ellipsis-v').forEach(button => {
        const menuItems = button.parentElement.nextElementSibling.querySelectorAll('a');
        menuItems.forEach(item => {
            if (item.textContent.includes('查看详情') || item.textContent.includes('编辑信息')) {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                    document.body.style.overflow = 'hidden';
                });
            }
        });
    });

    // 关闭模态框
    document.getElementById('close-modal').addEventListener('click', function() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = 'auto';
    });

    // 点击模态框外部关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = 'auto';
        }
    });
</script>
</body>
</html>
